<template>
	<view class="a-list">
		<view class="a-list-title border" @click.stop="tap">
			<view class="left-img" v-if="img">
				<text class="point" v-if="value.num">{{value.num}}</text>
				<image :lazy-load="true" class="image" :src="errorImg || value.img || defaultImg" @error="loadError" mode="scaleToFill"></image>
			</view>
			<view style="flex: 1;overflow: hidden;display: flex;flex-direction: column;justify-content: space-between;">
				<view class="main">
					<slot name="top">
						<slot name="top-left">{{value.name}}</slot>
						<view style="display: flex;align-items: center;justify-content: flex-end;">
							<slot name="top-right">
								<view class="top-right">{{value.phone}}</view>
							</slot>
						</view>
					</slot>
				</view>
				<view class="main" style="font-size: .7em;">
					<slot name="bottom">
						<slot name="bottom-left">
							<view style="color: #7c7c7c;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{value.sonTitle}}</view>
						</slot>
						<slot name="bottom-right">
							<view style="color: #7c7c7c;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{value.remark}}</view>
						</slot>
					</slot>
				</view>
			</view>
			<slot :name="value.slot || 'right'"></slot>
			<view v-if="!hideIcon && !value.hideIcon" class="iconfont icon-icon-arrow-right2-copy" :class="show?'icon-bottom':''"></view>
		</view>
		<view v-if="!hideIcon || !value.url" class="son-list" :class="show?'show':''">
			<slot :row="value.child"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Object,
				default () {
					return {};
				}
			},
			to: {
				type: String,
				default: ""
			},
			hideIcon: {
				type: Boolean,
				default: false
			},
			img:{
				type: Boolean,
				default: true
			},
			url:{
				type:[String,Function],
				default:''
			}
		},
		data() {
			return {
				show: false,
				defaultImg: require('./logo.png'),
				errorImg: undefined
			}
		},
		watch: {
			"value.unfold": {
				handler(n) {
					this.show = n;
				},
				immediate: true
			}
		},
		methods: {
			tap() {
				this.$emit('click',this.value);
				let {
					url,
					hideIcon
				} = this.value;
				if (url) {
					url = typeof url === "function" ? url(this.value) : url;
					uni.navigateTo({
						url
					})
					return;
				}else if(this.url){
					uni.navigateTo({
						url:this.url
					})
					return;
				}
				this.hideIcon || hideIcon || (this.show = !this.show);
			},
			loadError() {
				this.errorImg = this.defaultImg;
			}
		}
	}
</script>

<style lang="scss">
	.a-list {
		background-color: #fff;

		.left-img {
			width: 46px;
			height: 46px;
			position: relative;

			.point {
				color: #fff;
				position: absolute;
				transform: translateY(-8%) translateX(50%);
				top: 0;
				right: 0;
				border-radius: 999px;
				background-color: red;
				font-size: 12px;
				text-align: center;
				display: block;
				padding: 0 .3em;
				height: 1.2em;
				line-height: 1.2em;
				z-index: 2;
			}

			.image {
				position: absolute;
				border-radius: 10px;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
			}
		}

		&-title {
			font-size: 18px;
			display: flex;
			align-items: center;
			padding: 2px 0;
			padding-left: 10px;
			padding-right: 15px;

			.main {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 2px 15px;

				.top-right {
					font-size: .7em;
					opacity: .6;
				}
			}

			.icon-icon-arrow-right2-copy {
				opacity: .4;
				font-size: 1.1em;
				transition: all 400ms;

				&.icon-bottom {
					transform: rotateZ(90deg);
				}
			}
		}

		.border {
			position: relative;

			&::after {
				content: '';
				position: absolute;
				display: block;
				height: 0;
				top: auto;
				right: 0;
				left: 0;
				bottom: 0;
				transform: scaleY(.5);
				border-bottom: 1px solid rgba(0, 0, 0, .2);
			}
		}

		.son-list {
			padding-left: 20px;
			// transition: height 200ms;
			height: 0;
			overflow: hidden;

			&.show {
				height: auto;
				box-shadow: 0 0 8px 0 rgba(0, 0, 0, .1) inset;
				padding: 10px 0;
				padding-left: 20px;
			}
		}
	}
</style>
